<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">{{titleText}}</block>
		</cu-custom>
		<view class="my-bg">
				<view class="flex-wrap">
					<view class="flex  my-title-bg">
						<text style="width: 100px;">姓名</text>					
						<input class="uni-input" name="name" placeholder="请填写收货人姓名(必填)" v-model="name" />					
					</view>
					<view class="flex  my-title-bg">
						<text style="width: 100px;">电话</text>					
						<input class="uni-input" name="phone" placeholder="请填写联系方式(必填)" v-model="phone" />					
					</view>
				
					<view class="flex my-title-bg">
						<text style="width: 100px;">收货地址</text>					
						<AddressPicker @change="change" :level="3">							
							<text v-if="planLocate == '请选择地址'" style="color: gray;">{{planLocate}}</text>
							<text v-else >{{planLocate}}</text>
						</AddressPicker>
					</view>
					
					<view class="flex my-title-bg" style="border: unset;">
						<text style="width: 100px;">详细地址</text>					
						<input class="uni-input" name="detailAddress" placeholder="请输入详细地址" v-model="detailAddress"/>
					</view>
					
				</view>		
				
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn round bg-green-two" style="height: 45px;" @click="formSubmit()">保存</button>
			</view>
		</view>
		
</template>

<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue";
	var _self;
	export default{
		components:{AddressPicker},
		data(){
			return{
				titleText:'',
				// header:"",发票抬头 tax_id:"";纳税人识别号  email:""邮箱地址
				name:"",phone:"",address:'',detailAddress:'',
				hasSetBg:false,
				editId:"",
				planLocate:'请选择地址'
			}
		},
		onLoad(option){
			_self = this;
			if (Object.keys(option).length != 0) {
				//修改
				this.editId = option.id;
				this.getEditData(option.id);
				this.titleText = '修改收货地址';
			} else {
				console.log(this.obj);
				this.titleText = '添加收货地址';
			}
		},
		onShow(){
			_self = this;
			uni.setNavigationBarColor({
				frontColor: this.hasSetBg ?  "#000000" : "#262626",
				backgroundColor: this.hasSetBg ? "#F8F8F8" : "#CCCCCC"
			})
		},
		methods:{
			change(result) { 
				console.log(JSON.stringify(result.data)); 
				this.planLocate = ''; 
				result.data.forEach( 
					(item,index) =>{ 
						if(index===0){ 
							this.planLocate += item.name 
						}else{ 
							this.planLocate += '-' +item.name
						} 
					}) ; 
				let arr = this.planLocate.split('-');
				this.address = arr;
				console.log(111); 
				console.log(this.planLocate); 
				console.log(this.address); 
			}, 
			//获取修改信息
	async	getEditData(id){
				uni.showLoading({ title: '加载中...', mask: true });
				//获取修改信息
				let [err,res] = await this.$http.get('editAddress',{
					id:id
				},{
					token:true,
					checkToken:true ,
				});
				// 失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				
				console.log(res.data.data);
				
				this.name = res.data.data.name;
				this.phone = res.data.data.phone;
				this.planLocate = res.data.data.province+'-'+res.data.data.city+'-'+res.data.data.area;
				this.detailAddress = res.data.data.detail_address;
				let arr = this.planLocate.split('-');
				this.address = arr;
			},
	async	formSubmit(){
				uni.showLoading({
					title:'正在提交..',
					mask:true
				})
				//获取当前登录的用户ID
				if(this.editId == null || this.editId == ''){
					console.log(this.planLocate); 
					//新增
					let [err,res] = await this.$http.get('addAddress',{
						name:this.name,
						phone:this.phone,
						address:this.planLocate,
						detailAddress:this.detailAddress
					},{
						token:true,
						checkToken:true ,
					});
					// 失败
					if (!this.$http.errorCheck(err,res)){
						uni.hideLoading();
						return false;
					}
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
					});								
					setTimeout(function () {
						uni.hideToast();
						/* uni.navigateTo({
							url:'/pages/center/address/address-list'
						}) */
						uni.navigateBack({
							delta:1,//返回层数，2则上上页
						})
					}, 2000);
				} else {
					//修改
					let [err,res] = await this.$http.post('editAddress',{
						id:this.editId,
						name:this.name,
						phone:this.phone,
						address:this.planLocate,
						detailAddress:this.detailAddress
					},{
						token:true,
						checkToken:true ,
					});
					// 失败
					if (!this.$http.errorCheck(err,res)){
						uni.hideLoading();
						return false;
					}
					
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
					});								
					setTimeout(function () {
						uni.hideToast();
						/* uni.navigateTo({
							url:'/pages/centere/address/address-list'
						}) */
						uni.navigateBack({
							delta:1,//返回层数，2则上上页
						})
					}, 2000);
				}
				
				
			}
		}
	}	
</script>

<style>
	page {
		/* background-color: #E6E6E6; */
	}
	.uni-input-placeholder{
		color: #808080; 
	}
	.uni-textarea-placeholder{
		color: #808080; 
	}
</style>